import React from 'react';
// import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' // 相当于vue-router中的 history
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom' // 相当于vue-router中的 hash
import { connect } from 'react-redux'
import Login from './layout/Login'
import Index from './layout/Index'
// import { getStorage } from './utils/storage'

function App(props) {
  // Router 指的就是路由器，有且只有一个子元素
  // Switch 只能选中其中一个子元素 --- 一次只能触发一个路由
  // Route 定义的路由
  // <Route path="/login" component = { Login } />   直接使用组件
  // <Route path = "/login"><Login/></Route> 可以添加条件判断 - 渲染不同的组件
  // <Route path="/login" render = { () => (<Login />)}></Route> 可以添加条件判断 - 渲染不同的组件
  return (
    <Router>
      <Switch>
        <Route path="/login" component = { Login } />
        {/* <Route path="/" component = { Index } /> */}
        {/* <Route path="/" render={() => {
          return getStorage('loginState') === 'true' ? <Index /> : <Redirect to="/login" />
        }} /> */}
        <Route path="/" render={() => {
          return props.loginState ? <Index /> : <Redirect to="/login" />
        }} /> 
      </Switch>
    </Router>
  )
}

// const mapStateToProps = (state) => {
//   return {
//     loginState: state.user.loginState
//   }
// }
// const mapStateToProps = (state) => ({
//   loginState: state.user.loginState
// })

const mapStateToProps = ({ user: { loginState }}) => ({ loginState })
export default connect(mapStateToProps)(App);
